<template>
  <div>
    <van-nav-bar @click-left="onClickLeft" title="我的关注" left-arrow></van-nav-bar>
    <div class="img" v-if="list.length==0">
      <img src="../../assets/img/view.png" alt />
      <p>暂无关注</p>
    </div>
    <div class="content" v-else>
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div v-for="(item,index) in list" :key="index" class="content_item">
          <img class="avact" :src="item.avatar" alt srcset />
          <div class="xq">
            <P class="title">
              {{item.teacher_name}}
              <span class="title_ms">{{item.level_name}}</span>
            </P>
            <P class="phone">{{item.introduction}}</P>
          </div>
          <div class="fouc" @click="nofouc(item)">取消关注</div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import { teacherList, noteacher } from "../../request/http";
export default {
  name: "",
  data() {
    return {
      list: [],
      loading: false,
      finished: true,
      params: {
        page: 1,
        limit: 10,
        type: 2
      }
    };
  },
  props: [],
  components: {},
  mounted() {
    document.body.style.background = "#f2f3f5";
    this.getteacher();
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    getteacher() {
      teacherList(this.params).then(res => {
        console.log(res);
        this.list = res.list;
      });
    },
    onLoad() {},
    nofouc(item) {
      noteacher(item.collect_id).then(res => {
        console.log(res);
        this.$toast({
          message: res == 1 ? "已取消" : "失败",
          type: "success",
          duration: 1000
        });
        this.getteacher();
      });
    }
  }
};
</script>

<style scoped>
.content {
  margin: 15px 10px;
}
.content .content_item {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding: 5px 10px;
  border-radius: 5px;
}
.content .content_item > .avact {
  width: 40px;
  height: 40px;
}
.content .content_item > .xq {
  margin-left: 15px;
  line-height: 15px;
  flex: 3;
}
.content .content_item > .xq > .title {
  font-size: 15px;
}
.content .content_item > .xq > .title > .title_ms {
  font-size: 12px;
  color: #ea7a2f;
}
.content .content_item > .xq > .phone {
  color: #777;
}
.content .content_item > .fouc {
  padding: 5px 10px;
  background: #fdefe5;
  color: #eb6100;
  border-radius: 10px;
}

.img {
  text-align: center;
}
.img>img{
    width: 200px;
    height: 200px;
    margin-top: 100px;
}
</style>